<template>
	<view class="e-p-l-30 e-p-r-30" :style="[AppSkinVar]">
		<view class="e-p-t-28 e-p-b-28 e-flex" @tap="$goTo('/pages/public/msg/sys-msg-list', {type:1})">
			<image class="img-100 e-m-r-24" :src="$staticPath('msg-sys.png')" mode=""></image>
			<view class="e-flex-1">
				<view class="e-font-32 f-2e e-m-b-8 e-flex e-flex-between">
					<view class="e-flex">
						<text>{{$t('msg.系统消息')}}</text>
						<view class="red-box" v-if="sys && sys.unreadCount">
							<text class="c-white e-font-20">{{ sys.unreadCount }}</text>
						</view>
					</view>
					<text class="f-a7" v-if="sys && sys.createTime">{{ $timeFormat(sys.createTime,'yyyy-mm-dd hh:MM:ss')}}</text>
				</view>
				<view class="e-font-28 f-96 e-line-1 width-566" v-if="sys">
					{{ sys.title }}
				</view>
			</view>
		</view>
		<e-line color="#ededed"></e-line>
		<view class="e-p-t-28 e-p-b-28 e-flex" @tap="$goTo('/pages/public/msg/sys-msg-list',{type:2})">
			<image class="img-100 e-m-r-24" :src="$staticPath('msy-exp.png')" mode=""></image>
			<view class="e-flex-1">
				<view class="e-font-32 f-2e e-m-b-8 e-flex e-flex-between">
					<view class="e-flex">
						<text>{{$t('msg.物流消息')}}</text>
						<view class="red-box" v-if="express && express.unreadCount">
							<text class="c-white e-font-20">{{ express.unreadCount }}</text>
						</view>
					</view>
					<text class="f-a7" v-if="express && express.createTime">{{ $timeFormat(express.createTime,'yyyy-mm-dd hh:MM:ss') }}</text>
				</view>
				<view class="e-font-28 f-96 e-line-1 width-566" v-if="express">
					{{ express.title }}
				</view>
			</view>
		</view>
		
		<template v-for="(item,index) in chatMsgList" :key="item.id">
			<e-line color="#ededed"></e-line>
			<view class="e-p-t-28 e-p-b-28  e-flex"   @tap="jump(item,index)">
				<load-image :size="['88rpx']" shape="circle" :src="fullLink(item.avatar)" ></load-image>
				
				<view class="e-m-l-20 e-flex-1">
					<view class="e-flex e-flex-between e-m-b-10">
						<view class="e-flex">
							<view class="e-m-r-10">
								<text class="e-font-30">{{item.name}}</text>
							</view>
							<e-badge :absolute="false" :value="item.notreadcount"></e-badge>
						</view>
						<text class="e-font-22 c-secondary">{{timeFrom(item.sendtime,toI18('yesterday'))}}</text>
					</view>
					<view >
						<text class="c-secondary e-font-26" v-if="item.msgtype === 6">[{{$t('goods.img')}}]</text>
						<text class="c-secondary e-font-26" v-else-if="item.msgtype === 4">[{{toI18('audio')}}]</text>
						<text class="c-secondary e-font-26" v-else-if="item.msgtype === 100">{{toI18('msgLink')}}</text>
						<text class="c-secondary e-font-26 e-line-1" v-else>{{item.msgresume}}</text>
						
					</view>
				</view>
			</view>
			
		</template>
		

	</view>
</template>
<script lang="ts">
	import {
		defineComponent
	} from 'vue'
	// 所有可被装修选中的页面的混入，用于动态修改标题，例如装修的按钮组组件，按钮的文本为xxx，跳转到对应页面时，会将页面的标题修改为xxx
	import layoutPageTitleMixIn from '@/common/mixin/layoutPageTitleMixIn'
	export default defineComponent({
		mixins: [layoutPageTitleMixIn],
	})
</script>
<script lang="ts" setup>
	import {ref} from 'vue'
	import {
		getMessageCount
	} from '@/common/request/api'
	import type { HistoryChatMsg } from '@/common/request/api'
	import { useIM } from '@/common/stores'
	import { storeToRefs } from 'pinia'
	import {
		useI18n
	} from '@/common/hooks'
	import {timeFrom} from './utils'
	import {
		useCurrentInstance
	} from '@/common/hooks'
	import {
		onShow
	} from '@dcloudio/uni-app'
	
	const ctx = useCurrentInstance()
	
	const sys = ref(null)
	const express = ref(null)
	
	
	
	
	const toI18 = useI18n('public')
	const IMStore = useIM()
	const {tiocomConfig,chatMsgList} = storeToRefs(IMStore)
	
	const fullLink = (url:string) => `${tiocomConfig.value.res_server}/${url}`
	
	
	
	getMessageCount().then(res => {
			res.data?.forEach(item => {
				if (item.type === 1 || item.type===3) {
					sys.value = item
				} else if (item.type === 2) {
					express.value = item
				}
			})
		
	})
	
	const jump = (item:HistoryChatMsg,index:number) => {
		IMStore.setChatMsgNotreadcount(index)
		ctx.$goTo('/pages/public/msg/detail',{user:item.chatlinkid,name:item.name,bId:item.bizid})
	}
	
	onShow(() => {
		// IMStore.getChatMsgList()
	})
	
	


	
	
	
	
	
</script>
<style lang="scss">
	page{
		background-color: $base-color-white;
	}
</style>
<style lang="scss" scoped>
	.shadow-box {
		box-shadow: 0px -1px 0px 0px #ededed;
	}

	.img-100 {
		width: 100rpx;
		height: 100rpx;
		flex-shrink: 0;
	}

	.f-2e {
		color: #2e2e2e;
		line-height: 44rpx;
	}

	.f-96 {
		color: #969696;
		line-height: 40rpx;
	}

	.f-a7 {
		font-size: 26rpx;
		color: #a7aab3;
	}

	.width-566 {
		width: 566rpx;
	}

	.red-box {
		border-radius: 50%;
		background: $base-color-red;
		line-height: 20rpx;
		padding: 6rpx 8rpx 2rpx 8rpx;
		margin-bottom: 20rpx;
		margin-left: 4rpx;
	}

	.line-msg {
		border-bottom: 1rpx solid #EDEDED;
		margin: 0 30rpx;
	}
</style>
